<template>
    <div id="app">
        <div class="box">
            <div>
  
                <el-input class="l-input" v-model="search.keyWords" placeholder="关键字搜索"></el-input>
                <el-button type="primary" class="l-margin-l15" v-on:click="onSeach">搜索</el-button>
  
            </div>
        </div>
        <div class="box">
            <el-table :data="list" :height="250" border style="width: 100%" :highlight-current-row="true">
  
                <el-table-column label="账号" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.accountNo }}
                    </template>
                </el-table-column>
                <el-table-column label="姓名" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.name }}
                    </template>
                </el-table-column>
                
                <el-table-column label="操作" width="120"  align="center">
                    <template slot-scope="scope">
                      <el-button type="primary" size="mini" @click="onSelectRow(scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="height: 20px">&nbsp;</div>
        <div class="lpage">
            <el-pagination v-on:size-change="handleSizeChange" v-on:current-change="handleCurrentChange"
                v-bind:current-page="currentPage" v-bind:page-sizes="[10, 20, 30, 40]" v-bind:page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper" v-if="reflushPageFlag" v-bind:total="total">
            </el-pagination>
        </div>
        
    </div>
  </template>
  
  <script>
  var loading;
  import { requestPost } from '@/service/requestL';
  export default {
    data() {
        return {
            userPower: '',
            search: {
                keyWords: ""
            },
            //分页 开始
            currentPage: 1,
            pagesize: 10,
            total: 0,
            reflushPageFlag: true,
            list: [],
            
        };
    },
    created() {
        this.InitData();
    },
    watch: {},
    methods: {
  
        //初始化
        InitData() {
            this.getList();
        },
        //搜索
        onSeach(){
            this.PageIndex=1;
            this.getList();
        },
        //查询列表
        getList() {
            this.openLoading();
            this.list = [];
            var that = this;
  
            let jsondata = {
                PageIndex: this.currentPage,
                PageSize: this.pagesize,
                keyWords: this.search.keyWords
            };
            requestPost({
                url: "api/sys/GetAccountList",
                data: jsondata
            }).then(res => {
  
                if (res.data != undefined) {
                    that.list = res.data.list;
                    that.total = res.data.total;
  
                    that.$nextTick(function () {
                        that.reflushPageFlag = true;
                    });
                }
                that.closeLoading();
            }).catch(err => {
                this.$message.error("数据请求异常");
                that.closeLoading();
            })
  
        },
        //选择当前行
        onSelectRow(row){

            //往数组最前面添加元素
            let a=[];
            a.unshift(row);
            this.$emit('onSelectRow',row);
        },
        //当前条
        handleSizeChange(val) {
            this.pagesize = val;
            this.getList();
        },
        //当前页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getList();
        },
        //遮罩层 开启
        openLoading() {
            loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
        },
        //遮罩层 关闭
        closeLoading() {
            loading.close();
        },
    },
  };
  </script>
  
  <style scoped>
  
  
  .l-roleLisst {
    padding: 0px 30px;
  }
  
  
  .l-input {
    display: inline-block;
    width: 260px;
  }
  
  .l-input-form {
    display: inline-block;
    width: 220px;
  }
  
  .l-margin-l15 {
    margin-left: 15px;
  }
  
  .l-red {
    color: red;
  }
  </style>